﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>客户端单值专题图</title>
    <!--引入leaflet样式表-->
    <link href="../../3rdLib/leaflet.css" rel="stylesheet" type="text/css" />
    <!--引入当前页面样式表-->
    <link href="./style.css" rel="stylesheet" type="text/css" />
    <!--该库集成了leaflet与MapGIS IGServer for JavaScript脚本库-->
    <script src="./static/libs/include-leaflet-local.js"></script>
    <style>
        body {
            height: 700px;
        }

        .legendItemHeader,
        .legendItemValue {
            width: 200px;
            height: 18px;
            font-size: 14px;
        }

        .panel-primary {
            border-color: #337ab7;
        }

        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
            color: inherit;
        }

        .text-center {
            text-align: center;
        }

        .panel-heading {
            padding: 5px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .panel-body {
            padding: 15px;
        }
    </style>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //定义地图文档图层和地图、专题图图层
        var mapDocLayer, map, themeLayer;
        var { protocol, ip, port } = window.webclient;
        var ip = `${ip}`;
        var port = `${port}`;
        var docName = 'Hubei4326';
        var legendView, infoView;

        /** 初始化地图显示*/
        function init() {
            //地图容器
            map = L.map('leaf_map', {
                //地图渲染在canvas上
                preferCanvas: true,
                //不添加属性说明控件
                attributionControl: false,
                //添加缩放控件
                zoomControl: true,
                //投影坐标系
                crs: L.CRS.EPSG4326,
                //最大级数
                maxZoom: 15,
                //最小级数
                minZoom: 4
            }).setView([(29.0125822276524 + 33.2932017737021) / 2, (108.34341 + 116.150939561213)
                / 2], 6);
            //创建地图文档图层
            mapDocLayer = new Zondy.Map.MapDocLayer(docName, {
                //IP地址
                ip: ip,
                //端口号
                port: port,
                //只显示一个图层,不平铺显示
                noWrap: true
            }).addTo(map);
        }

        /** 添加专题图*/
        function createThemeBtn() {
            startPressBar();
            // 定义 Unique 单值专题图层
            themeLayer = Zondy.Map.uniqueThemeLayer("ThemeLayer", {
                // 开启 hover 高亮效果
                isHoverAble: true,
                opacity: 0.8,
                alwaysMapCRS: true
            }).addTo(map);

            // 图层基础样式
            themeLayer.style = new Zondy.Map.ThemeStyle({
                shadowBlur: 3,
                shadowColor: "#000000",
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                fillColor: "#FFFFFF"
            });

            // hover 高亮样式
            themeLayer.highlightStyle = new Zondy.Map.ThemeStyle({
                stroke: true,
                strokeWidth: 2,
                strokeColor: 'blue',
                fillColor: "#00F5FF",
                fillOpacity: 0.2
            });

            // 用于单值专题图的属性字段名称
            themeLayer.themeField = "分类索引";
            // 风格数组，设定值对应的样式
            themeLayer.styleGroups = [
                {
                    value: "0",
                    style: {
                        fillColor: "#FF00FF"
                    }
                },
                {
                    value: "1",
                    style: {
                        fillColor: "#0000FF"
                    }
                }, {
                    value: "2",
                    style: {
                        fillColor: "#238E23"
                    }
                }, {
                    value: "3",
                    style: {
                        fillColor: "#8E236B"
                    }
                }, {
                    value: "4",
                    style: {
                        fillColor: "#00FF7F"
                    }
                }
            ];

            //专题图层 mousemove 事件
            themeLayer.on("mousemove", highLightLayer);
            addThemeFeatures(uniqueQuerySuccess);
        }

        /** 添加专题图要素*/
        function addThemeFeatures(onsuccess) {
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                resultFormat: "json",
                struct: queryStruct,
                where: '1>0'
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 10000;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                ip: ip,
                port: port,
                requestType: 'POST',
                queryParam: {}
            });

            //执行查询操作，querySuccess为查询回调函数
            queryService.query(onsuccess, null);
        }

        /** 要素查询成功回调函数*/
        function uniqueQuerySuccess(data) {
            if (data != null) {
                //客户端专题图：添加数据
                themeLayer.addFeatures(data);
                initLegendView_unique();
                initInfoView_unique();
            }
            stopPressBar();
        }

        /** 高亮设置*/
        function highLightLayer(e) {
            if (e.target && e.target.refDataID) {
                var fea = themeLayer.getFeatureById(e.target.refDataID);
                if (fea) {
                    infoView.addTo(map);
                    infoView.update(fea);
                }
            } else if (infoView) {
                infoView.remove();
            }
        }

        /** 初始化图例视图*/
        function initLegendView_unique() {
            legendView = L.control({ position: 'bottomright' });
            legendView.onAdd = function () {
                this._div = L.DomUtil.create('div', 'panel panel-primary legend ');
                this._div.style.width = '272px';
                this._div.style.marginBottom = '70px';
                var title = "<div class='panel-heading'><h5 class='panel-title text-center'>" + '图例' + "</h5></div>";

                title += "<div class='panel-body text-center' ><table>" +
                    "<tr><td class='legendItemHeader'>" + '分类索引' + "</td><td class='legendItemValue'>" + '颜色' + "</td></tr>" +
                    "<tr> <td class='legendItemHeader'>0</td> <td class='legendItemValue' style='background: #FF00FF'></td></tr>" +
                    "<tr> <td class='legendItemHeader'>1</td> <td class='legendItemValue' style='background: #0000FF'></td></tr>" +
                    "<tr> <td class='legendItemHeader'>2</td> <td class='legendItemValue' style='background: #238E23'></td> </tr>" +
                    "<tr> <td class='legendItemHeader'>3</td> <td class='legendItemValue' style='background: #8E236B'></td> </tr>" +
                    "<tr> <td class='legendItemHeader'>4</td> <td class='legendItemValue' style='background: #00FF7F'></td> </tr>" +
                    "</table></div>";
                this._div.innerHTML = title;
                handleMapEvent(this._div, this._map);
                return this._div;
            };
            legendView.addTo(map);
        }

        /** 初始化属性记录视图*/
        function initInfoView_unique() {
            infoView = L.control({ position: 'bottomright' });
            infoView.onAdd = function () {
                this._div = L.DomUtil.create('div', 'panel panel-primary infoPane');
                this._div.style.width = '272px';
                var content = "<div class='panel-heading'><h5 class='panel-title text-center'>" + '属性表' + "</h5></div>";
                content += "<div class='panel-body content' style='fontSize: 14px'></div>";
                this._div.innerHTML = content;
                handleMapEvent(this._div, this._map);
                return this._div;
            };

            infoView.update = function (fea) {
                if (!fea) {
                    return;
                }
                var eles = document.getElementsByClassName('content');
                if (eles != null && eles.length > 0) {
                    var innerHtml = "FID: " + fea.attributes.FID + "<br/>";
                    innerHtml += '行政区：' + fea.attributes['NAME'] + "<br/>";

                    innerHtml += '分类索引：' + parseInt(fea.attributes['分类索引']) + "<br/>";
                    eles[0].innerHTML = innerHtml;
                }
            };
        }

        /** 地图容器事件处理函数*/
        function handleMapEvent(div, map) {
            if (!div || !map) {
                return;
            }
            div.addEventListener('mouseover', function () {
                map.dragging.disable();
                map.scrollWheelZoom.disable();
                map.doubleClickZoom.disable();
            });
            div.addEventListener('mouseout', function () {
                map.dragging.enable();
                map.scrollWheelZoom.enable();
                map.doubleClickZoom.enable();
            });
        }

        /** 删除专题图*/
        function deleteTheme() {
            if (map != null && themeLayer != null) {
                map.removeLayer(themeLayer);
            }
            if (infoView) {
                map.removeControl(infoView);
                infoView = null;
            }
            if (legendView) {
                map.removeControl(legendView);
                legendView = null;
            }
        }

        /** 开始进度条动画*/
        function startPressBar() {
            document.getElementById('preview').style.display = "";
        }

        /** 停止进度条动画*/
        function stopPressBar() {
            document.getElementById('preview').style.display = "none";
        }
    </script>
</head>

<body onload="init();">
    <div id="preview" style="display: none; text-align: center; padding-top: 250px; font-weight: bold">
        <img src="./static/assets/graphic-image/39-1.gif" alt='' /><br />
        <br />
        <span>正在操作，请稍候</span>
    </div>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="createThemeBtn" value="添加专题图" onclick="createThemeBtn()" />
        <input type="button" class="ButtonLib" id="deleteThemeBtn" value="删除专题图" onclick="deleteTheme()" />
    </div>
    <div id="leaf_map" style="width: 100%; height:95%;">
    </div>
</body>

</html>